<template>
  <div class="content">
          <div class="content">
      <div class="slider">
        <van-swipe class="my-swipe" :autoplay="2000" indicator-color="white">
          <van-swipe-item
            v-for="sliderItem in sliderItems"
            :key="sliderItem.id"
            @click="toRead(sliderItem.blink)"
          >
            <div>
              <div class="text">
                {{ sliderItem.title }}
              </div>
              <img class="sliderImg" :src="sliderItem.img" alt="" />
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="menuWrap">
        <div class="timeline" @click="toTimeLime">
          <img src="../images/shijianbiao.png" alt="">
          <div class="menuTitle">时间表</div>
        </div>
        <div class="new" @click="toNews">
          <img src="../images/woxihuande.png" alt="">
         <div class="menuTitle">新番导视</div> 
        </div>
      </div>
      <div class="mainTitle">
                    正在热播
      </div>
      <van-list
        finished-text="没有更多了"
        :finished="finished"
        @load="onLoad"
      >
        <div class="main">
          <div class="containner" v-for="item in list" :key="item.title"  @click="towatch(item.url)">
            <div>
              <div class="img">
                <img :src="item.new_ep.cover" />
              </div>
              <div class="watchmsg">
                <div class="badge" :class="{badge1: item.badge.length == 4 , badge2: item.badge.length == 2}">
                  {{item.badge}}
                </div>
                <div class="watch">
                {{ item.new_ep.index_show }}
                </div>
              </div>
            </div>
            <div class="title">
              {{ item.title }}
            </div>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script setup>
import { ref } from "@vue/reactivity";
import { onMounted } from "@vue/runtime-core";
import { getAnimation,getSlider } from "../api";
import { useRouter } from "vue-router";

const router = useRouter()
const finished = ref(false);
const list = ref([])
const sliderItems = ref([])
const id = ref(104)
onMounted(() => {
  getSlider(id.value).then(res => {
    // console.log(res);
    sliderItems.value = res
  })
  getAnimation().then(res => {
    // console.log(res.result.list);
    list.value = res.result.list
    // console.log( res.result.list[1].badge.length);
  })
})

//滑块点击事件
const toRead = (blink) => {
  // console.log(blink);
  window.location.href = blink
}
//看番
const towatch = (url) => {
  window.open(url, '_blank');
  // window.location.href = url
}
//触底事件
const onLoad = () => {
  if(list.value.length >= 50) {
    finished.value = true
  }
};
//时间表
const toTimeLime = () => {
  router.push({path:'/timeLine'})
}
//新番
const toNews = () => {
  router.push({ path:'/news'})
}
</script>

<style scoped>
.my-swipe .van-swipe-item {
  color: rgba(238, 242, 246);
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
  width: 100%;
  height: 200px;
}
.content{
  margin-bottom: 50px;
}
.sliderImg {
  image-rendering: auto;
  width: 100%;
}
.text {
  position: absolute;
  margin-top: 110px;
  margin-left: 20px;
  color: #39a9ed;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.menuWrap{
  display: flex;
  height: 70px;
  padding-top: 20px;
  /* background-color: rgba(238, 242, 246); */
  border-bottom: 0.1px solid #aaa;
  justify-content: space-between;
}
.menuWrap img {
  height: 40px;
}
.timeline{
  margin-left: 60px;
  width: 64px;
  text-align: center;
  font-size: 14px;
}
.new{
  margin-right: 60px;
  width: 64px;
  text-align: center;
  font-size: 14px;
}
.mainTitle{
  padding-left: 10px;
  padding-top: 10px;
  /* background-color: rgba(238, 242, 246); */
  font-size: 18px;
}
.main {
  display: flex;
  width: 97%;
  justify-content: space-between;
  flex-wrap: wrap;
  /* background-color: rgba(238, 242, 246); */
}

.containner {
  width: 165px;
  height: 135px;
  /* margin: 10px 10px 0 10px; */
  margin: 10px 0 0 3%;
  border: 1px solid #aaa;
  background-color: rgba(255, 255, 255);
  border-radius: 10px;
}
.img img {
  width: 165px;
  height: 103px;
  border-radius: 10px;
}
.watchmsg {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 165px;
  height: 103px;
  margin-top: -64%;
  color: #fff;
  justify-content: space-between;
}
.badge1{
margin-left: 95px;
margin-top: 2px;
width: 65px;
background-color: rgb(228, 22, 108);
}
.badge2{
margin-left: 125px;
margin-top: 2px;
width: 35px;
background-color: rgb(30, 137, 236);
}
.watch{
  margin-left: 6px;
  height: 20px;
}
.title {
  margin-top: 2px;
  font-size: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: bold;
  
}

</style>